<!-- Optional Loading Overlay -->
<div *ngIf="isLoading" class="loading-overlay">
    <mat-spinner diameter="50"></mat-spinner>
</div>

<ng-container *ngIf="codeTask"> <!-- Check for codeTask existence -->
    <!-- Link to File Selection -->
    <a [routerLink]="['/codeTask', 'file-list', codeTask?.id]" class="mb-4 inline-block text-blue-600 hover:underline">View File Selection</a>

    <form [formGroup]="designForm" class="sm:col-span-2">
        <!-- Design Proposal Section -->
        <div class="flex justify-between items-center mb-2">
            <div class="font-semibold">Design Proposal:</div>
            <!-- Edit Button -->
            <button
                *ngIf="!isEditing"
                mat-icon-button
                (click)="toggleEdit()"
                matTooltip="Edit Design Proposal">
                <mat-icon svgIcon="heroicons_outline:pencil-square"></mat-icon>
            </button>
        </div>

        <!-- Display Mode -->
        <p *ngIf="!isEditing" class="text-secondary whitespace-pre-wrap mb-4">{{ designForm.get('designAnswer')?.value }}</p>

        <!-- Edit Mode -->
        <mat-form-field *ngIf="isEditing" class="w-full mb-4">
            <mat-label>Design Proposal Text</mat-label>
            <textarea
                matInput
                formControlName="designAnswer"
                rows="10"
                cdkTextareaAutosize
                #autosize="cdkTextareaAutosize"
                cdkAutosizeMinRows="5"
                cdkAutosizeMaxRows="20">
            </textarea>
            <mat-error *ngIf="designForm.get('designAnswer')?.hasError('required')">
                Design proposal text cannot be empty.
            </mat-error>
        </mat-form-field>

        <!-- Variations Selector Removed -->

        <!-- Refinement Prompt Section -->
        <mat-form-field class="w-full mt-4" appearance="fill">
            <mat-label>Update Design Instructions</mat-label>
            <textarea matInput [formControl]="refinementPrompt" rows="3" placeholder="Enter instructions to refine the design..."></textarea>
        </mat-form-field>
        <div class="flex justify-end mb-4"> <!-- Align button to the right -->
            <button mat-stroked-button color="accent" (click)="submitRefinementPrompt()" [disabled]="isLoading || !refinementPrompt.value?.trim()">
                Submit Prompt
            </button>
        </div>

        <!-- Main Actions -->
        <mat-card-actions align="end">
             <!-- Actions in Edit Mode -->
            <ng-container *ngIf="isEditing">
                <button
                    mat-stroked-button
                    (click)="cancelEdit()">
                    Cancel
                </button>
                <button
                    mat-flat-button
                    color="primary"
                    [disabled]="designForm.invalid || isLoading"
                    (click)="saveDesign()">
                    Save Changes
                </button>
            </ng-container>

            <!-- Actions in Display Mode -->
            <ng-container *ngIf="!isEditing">
                <!-- Renamed and updated action -->
                <button
                    mat-flat-button
                    color="primary"
                    [disabled]="designForm.invalid || isEditing || isLoading"
                    (click)="acceptDesign()"> <!-- acceptDesign now calls triggerImplementation -->
                    Implement Design
                </button>
                <!-- Add other actions like 'Request Changes' later if needed -->
            </ng-container>
        </mat-card-actions>
    </form>
</ng-container>
